import Taro from '@tarojs/taro';
import { View } from '@tarojs/components';
import { Icon } from '@nutui/nutui-react-taro';
import { useSelector, useDispatch } from 'react-redux';
import { toggleEdit } from '../../store/taskSlice.js';
import TaskCard from '../../components/TaskCard/TaskCard';
import EditDialog from '../../components/EditDialog/EditDialog.jsx';
import { TASK_STATUS } from '../../const/const.js';
import './index.scss'

export default function Index(props) {
    const list = useSelector(state => state.task.list);
    const dispatch = useDispatch();

    const undoTaskList = list.filter((item) => item.status === TASK_STATUS.undo.key);
    const doingTaskList = list.filter((item) => item.status === TASK_STATUS.doing.key);
    const doneTaskList = list.filter((item) => item.status === TASK_STATUS.done.key);

    const addMyTask = function() {
      // dispatch(toggleEdit())
      Taro.navigateTo({
        url: '/pages/taskEdit/index'
      })
    }
    return (
      <View className='index'>
        <TaskCard type={TASK_STATUS.undo.text} list={undoTaskList.slice(0, 5)}  />
        <TaskCard type={TASK_STATUS.doing.text} list={doingTaskList.slice(0, 5)}  />
        <TaskCard type={TASK_STATUS.done.text} list={doneTaskList.slice(0, 5)}  />
        {/* 新增任务入口 */}
        <View class="icon-add" onClick={addMyTask}><Icon name='uploader' size='20px' /></View>
        {/* 任务编辑 */}
        <EditDialog />

      </View>
    )
}
